import { ExternalLink } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { permanentRedirect } from 'next/navigation';
import { CompareButton } from '@/components/compare/compare-button';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { RelationsBlock, SourcesTable, TimelineList } from '@/components/entity/blocks';
import { buildMetadata, loadEntity } from '@/components/entity/load';
import { QUANTS } from '@/components/hardware/fit-form';
import { fmtMemory, HW_KIND_LABELS, memoryOptions } from '@/components/hardware/hardware-bits';
import { EstimateBanner, FitBreakdownList, Methodology, SourceTag } from '@/components/intelligence/bits';
import { ViewBeacon } from '@/components/layout/view-beacon';
import { Chip, EntityBadge, Estimated, OpennessBadge, StatusBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { KeyValue } from '@/components/ui/key-value';
import { Container, Note, Section } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { WatchButton } from '@/components/watchlist/watch-button';
import { api, intel, safe } from '@/lib/api';
import { fmtGb, fmtInt, fmtParams, fmtTokens, num } from '@/lib/format';
import { PROSE_KEYS, routes, SITE_NAME, SITE_URL } from '@/lib/site';

export const revalidate = 600;
type Params = { params: Promise<{ slug: string }>; searchParams: Promise<Record<string, string | undefined>> };
const CONTEXTS = [8192, 32768, 131072];

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug } = await params;
  const d = await safe(api.entityOfType('hardware', slug));
  if (!d || d.entity_type !== 'hardware') return { title: 'Hardware', robots: { index: false } };
  const m = buildMetadata(d);
  const a = d.attributes ?? {};
  return { ...m, title: `${d.name} — specs and which AI models fit (estimated)`, description: `${d.name}${typeof a.manufacturer === 'string' ? ` by ${a.manufacturer}` : ''}: ${fmtMemory(a.memory_gb)} memory${num(a.memory_bandwidth_gbs) !== null ? `, ${fmtInt(a.memory_bandwidth_gbs)} GB/s` : ''} as published, with sources — and the models estimated to fit at 4-bit, 8-bit and fp16. ${SITE_NAME}.` };
}

export default async function HardwarePage({ params, searchParams }: Params) {
  const { slug } = await params;
  const sp = await searchParams;
  const d = await loadEntity('hardware', slug);
  const canonical = routes.entity(d);
  if (canonical !== `/hardware/${encodeURIComponent(slug)}`) permanentRedirect(canonical);
  const a = d.attributes ?? {};
  const quant = QUANTS.some((q) => q.value === sp.quant) ? (sp.quant as string) : '4bit';
  const ctx = num(sp.context);
  const context = ctx !== null && ctx > 0 ? Math.round(ctx) : 8192;
  const memChoice = num(sp.memory_gb);
  const options = memoryOptions(a.memory_gb);
  const fit = await safe(intel.hardwareSlugFit(d.slug, { quant, context, memory_gb: memChoice ?? undefined, limit: 120 }));
  const memoryUsed = num(fit?.inputs?.memory_gb) ?? memChoice ?? options.at(-1) ?? null;
  const self = (patch: { quant?: string; context?: number; memory_gb?: number | null }) => {
    const p = new URLSearchParams();
    const q = patch.quant ?? quant;
    const c = patch.context ?? context;
    const m = patch.memory_gb === undefined ? memChoice : patch.memory_gb;
    if (q !== '4bit') p.set('quant', q);
    if (c !== 8192) p.set('context', String(c));
    if (m !== null && m !== undefined) p.set('memory_gb', String(m));
    const s = p.toString();
    return `${canonical}${s ? `?${s}` : ''}#fit`;
  };
  const specRows = Object.keys(a)
    .filter((k) => !PROSE_KEYS.has(k))
    .map((k) => ({ key: k, raw: a[k] }));
  const items = fit?.items ?? [];
  const ld = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: d.name,
    brand: typeof a.manufacturer === 'string' ? { '@type': 'Brand', name: a.manufacturer } : undefined,
    category: typeof a.kind === 'string' ? HW_KIND_LABELS[a.kind] ?? a.kind : 'Hardware',
    description: d.description ?? undefined,
    url: `${SITE_URL}${canonical}`,
    additionalProperty: [
      options.length ? { '@type': 'PropertyValue', name: 'Memory', value: fmtMemory(a.memory_gb) } : null,
      num(a.memory_bandwidth_gbs) !== null ? { '@type': 'PropertyValue', name: 'Memory bandwidth', value: `${fmtInt(a.memory_bandwidth_gbs)} GB/s` } : null,
    ].filter(Boolean),
  };
  const chip = (on: boolean) => `inline-flex h-9 items-center border px-2.5 text-xs font-medium ${on ? 'border-ink bg-ink text-canvas' : 'border-rule text-ink-2 hover:border-rule-strong hover:text-ink'}`;

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <ViewBeacon path={canonical} />
      <header className="pb-5 pt-7 md:pt-10">
        <div className="flex flex-wrap items-center gap-2 text-sm text-ink-3">
          <Link href={routes.hardware()} className="hover:text-ink">Hardware</Link> <span aria-hidden>/</span>
          <EntityBadge type={d.entity_type} />
          {typeof a.kind === 'string' && <Chip>{HW_KIND_LABELS[a.kind] ?? a.kind}</Chip>}
          <StatusBadge status={d.status} />
        </div>
        <div className="mt-2 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div className="min-w-0">
            <h1 className="display text-[28px] md:text-[40px]">{d.name}</h1>
            <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-ink-2">
              {typeof a.manufacturer === 'string' && <span>{a.manufacturer}</span>}
              {d.organization && (
                <Link href={routes.entity({ entity_type: 'company', slug: d.organization.slug })} className="hover:text-accent">
                  {d.organization.name}
                </Link>
              )}
              {typeof a.spec_url === 'string' && (
                <a href={a.spec_url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 hover:text-accent">
                  spec sheet <ExternalLink className="size-3" aria-hidden />
                </a>
              )}
              <QualityMark q={d.quality?.score} label />
            </p>
            <dl className="tnum mt-3 flex flex-wrap gap-x-6 gap-y-1 text-sm">
              <div><dt className="inline text-ink-3">Memory </dt><dd className="inline font-medium text-ink">{fmtMemory(a.memory_gb)}</dd></div>
              <div><dt className="inline text-ink-3">Bandwidth </dt><dd className="inline font-medium text-ink">{num(a.memory_bandwidth_gbs) === null ? '—' : `${fmtInt(a.memory_bandwidth_gbs)} GB/s`}</dd></div>
              <div><dt className="inline text-ink-3">TDP </dt><dd className="inline font-medium text-ink">{num(a.tdp_watts) === null ? '—' : `${fmtInt(a.tdp_watts)} W`}</dd></div>
              {Array.isArray(a.runtimes) && a.runtimes.length > 0 && <div><dt className="inline text-ink-3">Runtimes </dt><dd className="inline font-medium text-ink">{(a.runtimes as string[]).join(', ')}</dd></div>}
            </dl>
            {d.description && <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-ink-2">{d.description}</p>}
          </div>
          <div className="flex shrink-0 flex-wrap items-center gap-2">
            <CompareButton e={d} />
            <WatchButton e={d} />
            <Link href={`${routes.runLocally()}?hardware=${encodeURIComponent(d.slug)}`} className="inline-flex h-9 items-center border border-rule-strong px-2.5 text-sm font-medium text-ink hover:border-accent hover:text-accent">
              Run locally with this device →
            </Link>
          </div>
        </div>
      </header>

      <Section eyebrow="Specifications" title="As published" lede="Every value opens its evidence (source, tier, observed time)." hairline={false}>
        <KeyValue rows={specRows} provenance={d.provenance} slug={d.slug} entity={{ name: d.name, entity_type: d.entity_type }} />
      </Section>

      {/* ------------------------------------------------------------------------------------------------- fit */}
      <Section id="fit" eyebrow="What can this run?" title={<span className="inline-flex flex-wrap items-center gap-2">Models estimated to fit <Estimated /></span>} lede="Estimate from each model's parameter count, the chosen quantization and context — never a measurement." action={{ href: `${routes.runLocally()}?hardware=${encodeURIComponent(d.slug)}&quant=${quant}&context=${context}${memoryUsed ? `&memory_gb=${memoryUsed}` : ''}`, label: 'Open in Run locally' }}>
        <div className="mb-4 flex flex-wrap items-center gap-x-6 gap-y-3 text-xs">
          <div className="flex flex-wrap items-center gap-1.5">
            <span className="eyebrow mr-1">Quantization</span>
            {QUANTS.map((q) => (
              <Link key={q.value} href={self({ quant: q.value })} className={chip(quant === q.value)} aria-current={quant === q.value ? 'true' : undefined}>
                {q.value}
              </Link>
            ))}
          </div>
          <div className="flex flex-wrap items-center gap-1.5">
            <span className="eyebrow mr-1">Context</span>
            {CONTEXTS.map((c) => (
              <Link key={c} href={self({ context: c })} className={chip(context === c)} aria-current={context === c ? 'true' : undefined}>
                {fmtTokens(c)}
              </Link>
            ))}
          </div>
          {options.length > 1 && (
            <div className="flex flex-wrap items-center gap-1.5">
              <span className="eyebrow mr-1">Configuration</span>
              {options.map((m) => (
                <Link key={m} href={self({ memory_gb: m })} className={chip(memoryUsed === m)} aria-current={memoryUsed === m ? 'true' : undefined}>
                  {m} GB
                </Link>
              ))}
            </div>
          )}
        </div>
        {!fit ? (
          <Unavailable what="Fit estimate" reason={options.length ? undefined : 'This device has no sourced memory figure — nothing can be estimated.'} />
        ) : (
          <>
            <EstimateBanner assumptions={fit.assumptions} note={fit.note ?? null} counts={fit.counts} />
            {options.length > 1 && <Note className="mt-2">This device ships in {options.length} memory configurations ({options.join(' / ')} GB). Estimates use {fmtGb(memoryUsed)} — pick another configuration above. Multiple units: use <Link href={`${routes.runLocally()}?hardware=${encodeURIComponent(d.slug)}&gpu_count=2`} className="link">Run locally</Link> (memories are summed; interconnect is not modelled).</Note>}
            {fit.runtimes?.length > 0 && <p className="mt-2 text-xs text-ink-3">Runtimes recorded for this device: <span className="mono">{fit.runtimes.join(' · ')}</span></p>}
            {items.length === 0 ? (
              <EmptyState title="No model evaluated" className="mt-4">Models without a sourced parameter count are not estimated.</EmptyState>
            ) : (
              <DataTable scroll compact className="mt-4">
                <thead>
                  <tr>
                    <Th>Model</Th>
                    <Th num>Params</Th>
                    <Th num>Est. memory</Th>
                    <Th num>Headroom</Th>
                    <Th>Fits</Th>
                    <Th>Breakdown</Th>
                    <Th className="w-24" aria-label="Compare" />
                  </tr>
                </thead>
                <tbody>
                  {items.length === 0 && <EmptyRow cols={7} />}
                  {items.map((r) => {
                    const openness = typeof r.model.attributes?.openness === 'string' ? r.model.attributes.openness : null;
                    const head = num(r.headroom_gb);
                    return (
                      <tr key={r.model.id}>
                        <Td primary>
                          <span className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                            <EntityLink e={r.model} />
                            {openness && <OpennessBadge openness={openness} />}
                          </span>
                          {r.model.organization && <span className="block text-xs text-ink-3">{r.model.organization.name}</span>}
                        </Td>
                        <Td num label="Params" className="tnum">{fmtParams(r.parameter_count ?? r.model.attributes?.parameter_count)}</Td>
                        <Td num label="Est. memory" className="tnum">{fmtGb(r.estimated_memory_gb, 1)} <SourceTag source={r.breakdown?.weights_source ?? 'estimated'} /></Td>
                        <Td num label="Headroom" className={r.fits ? 'tnum text-positive' : 'tnum text-danger'}>{head === null ? '—' : `${head >= 0 ? '+' : '−'}${fmtGb(Math.abs(head), 1)}`}</Td>
                        <Td label="Fits" className={r.fits ? 'font-medium text-positive' : 'text-ink-3'}>{r.fits ? '✓ fits' : '✗ too large'}</Td>
                        <Td label="Breakdown" wide><FitBreakdownList fit={r} /></Td>
                        <Td className="text-right"><CompareButton e={r.model} size="sm" /></Td>
                      </tr>
                    );
                  })}
                </tbody>
              </DataTable>
            )}
            {fit.items.length >= 120 && <Note className="mt-2">First 120 models (fitting first). The full list is in <Link href={`${routes.runLocally()}?hardware=${encodeURIComponent(d.slug)}&quant=${quant}&context=${context}`} className="link">Run locally</Link>.</Note>}
            <Methodology text={fit.note ?? fit.assumptions[0]} />
          </>
        )}
      </Section>

      {d.relations?.length ? (
        <Section eyebrow="Relations" title="In the graph" action={{ href: routes.graph(d.slug), label: 'Explore graph' }}>
          <RelationsBlock relations={d.relations} />
        </Section>
      ) : null}
      <Section eyebrow="Timeline" title="Events" action={{ href: routes.timeline({ entity: d.slug }), label: 'Full timeline' }}>
        <TimelineList events={d.timeline ?? []} slug={d.slug} />
      </Section>
      <Section eyebrow="Sources" title="Where these facts come from">
        <SourcesTable sources={d.sources ?? []} />
      </Section>
      <CompareTrayBar />
    </Container>
  );
}